<template>
  <div class="contain">
   
    <div class="second">
      <img src="@/assets/imgs/logo.png" alt="" class="logo" />
      <div class="main">
        <div class="m-top">
          <div class="m-left">
            <div class="m-tleft"> 
            </div>
          </div>
        </div>
        <div class="m-bottom">
          <el-descriptions
            class="margin-top"
            :column="3"
            :size="size"
          >
            <el-descriptions-item label="主题:">
              {{formData.theme}}
            </el-descriptions-item>
            <el-descriptions-item label="有效日期:">
              {{formData.startDate}} 到 {{formData.endDate}}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions
            class="margin-top"
            :column="3"
            :size="size"
          >
            <el-descriptions-item label="内容简介:">
              {{formData.content}}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions
            class="margin-top"
            :column="3"
            :size="size"
          >
            <el-descriptions-item label="公函内容:">
              <div v-html="userBio"></div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
    <div class="third">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="操作日志" name="first">
          <el-table v-loading="loading" :data="operateData" :stripe="true" :show-overflow-tooltip="true">
            <el-table-column label="序号" type="index"  header-align="center" align="center" width="60px" fixed />
            <el-table-column label="操作人" align="center" prop="userName" />
            <el-table-column label="操作时间" align="center" prop="createTime" :formatter="dateFormatter" width="180px" />
            <el-table-column label="操作类型" align="center" prop="subType" width="120" />
            <el-table-column label="操作说明" align="center" prop="action" show-overflow-tooltip />
          </el-table>
          <!-- 分页 -->
          <Pagination
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="getOperateList"
          />
        </el-tab-pane>
        <el-tab-pane label="查阅公函人员" name="second">
          <el-table ref="multipleTableRef" :data="tableUserData" style="width: 100%; margin-top: 10px; height: 200px;">
            <el-table-column label="序号" type="index"  header-align="center" align="center" width="60px" fixed />
            <el-table-column label="用户昵称" align="center" prop="userName" :show-overflow-tooltip="true" />
            <el-table-column label="部门" align="center" key="deptId" prop="deptId" :show-overflow-tooltip="true">
              <template #default="scope">
                {{ deptList.find((dept) => dept.id === scope.row.deptId)?.name }}
              </template>
            </el-table-column>
            <el-table-column label="手机号码" align="center" prop="mobile" width="120" />
            <el-table-column label="查看状态" align="center" prop="status">
              <template #default="scope">
                <dict-tag :type="DICT_TYPE.PUBLIC_VIEW_STATUS" :value="scope.row.status" />
              </template>
            </el-table-column>
            <el-table-column label="审批通过时间" align="center" prop="publishTime" :formatter="dateFormatter" width="180px" />
            <el-table-column label="查看时间" align="center" prop="lastViewTime" :formatter="dateFormatter" width="180px" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="附件列表" name="third">
          <el-table ref="multipleTableRef" :data="uploadList" style="width: 100%; margin-top: 10px; height: 200px;">
            <el-table-column label="序号" type="index"  header-align="center" align="center" width="60px" fixed />
            <el-table-column label="文件名称" align="center" prop="name" :show-overflow-tooltip="true" />
            <el-table-column label="文件路径" align="center" prop="url" :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center" fixed="right" width="140px">
              <template #default="scope">
                <el-link type="primary" download :href="scope.row.url" :underline="false" target="_blank">下载</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- <el-tab-pane label="审批记录" name="forth">
          <el-table ref="multipleTableRef" :data="tableData" style="width: 100%; margin-top: 10px; height: 200px;">
            <el-table-column label="序号" type="index"  header-align="center" align="center" width="60px" fixed />
            <el-table-column label="审批人" align="center" prop="creator" :show-overflow-tooltip="true">
              <template #default="scope">
                {{ userList.find((user) => user.id === scope.row.creator)?.nickname }}
              </template>
            </el-table-column>
            <el-table-column label="审批时间" align="center" prop="createTime" :formatter="dateFormatter" :show-overflow-tooltip="true" />
            <el-table-column label="审批结果" align="center" prop="approveResult" :show-overflow-tooltip="true">
              <template #default="scope">
                <dict-tag :type="DICT_TYPE.PUBLIC_APPROVAL_STATUS" :value="scope.row.approveResult" />
              </template>
            </el-table-column>
            <el-table-column label="审批意见" align="center" prop="approveOpinion" :show-overflow-tooltip="true" />
          </el-table>
        </el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { BaseOfficialLetterApi, BaseOfficialLetterVO, BaseOfficialLetterRecordVO } from '@/api/infra/baseofficialletter'
import * as UserApi from '@/api/system/user'
import * as DeptApi from '@/api/system/dept'
import * as OperateLogApi from '@/api/system/operatelog'

import { dateFormatter } from '@/utils/formatTime'
import { CommonStatusEnum } from '@/utils/constants'
import { DICT_TYPE } from '@/utils/dict'
import type { UploadUserFile } from 'element-plus'
import { ref, defineProps } from 'vue'

/** 公函 表单 */
defineOptions({ name: 'DetailForm' })
const props = defineProps({
  detailId: Number
});

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const uploadList = ref<UploadUserFile[]>([])
const tableUserData = ref<UserApi.UserVO[]>([])
const userList = ref<UserApi.UserVO[]>([])
const deptList = ref<DeptApi.DeptVO>([])
const tableData = ref<BaseOfficialLetterRecordVO[]>([])
const operateData = ref<OperateLogApi.OperateLogVO[]>([]) // 列表的数据
const activeName = ref('first')
const dialogVisible = ref(false) // 弹窗的是否展示
const userBio = ref('')
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  id: undefined,
  theme: undefined,
  daterange: undefined,
  startDate: undefined,
  endDate: undefined,
  fileExists: undefined,
  content: undefined,
  remark: undefined,
  imageAddress: undefined,
  status: CommonStatusEnum.ENABLE,
  detailData: undefined,
  fileData: undefined
})
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  userId: undefined,
  type: "INFRA 公函管理",
  subType: undefined,
  action: undefined,
  createTime: [],
  bizId: props.detailId,
})
/** 初始化 **/
onMounted(() => {
  getClassManage()
})

/** 查询列表 */
const getClassManage = async () => {
  resetForm()
  tableUserData.value = []
  uploadList.value = []
  tableData.value = []
  userBio.value = ''
  // 修改时，设置数据
  if (props.detailId) {
    const id = props.detailId
    formLoading.value = true
    try {
      formData.value = await BaseOfficialLetterApi.getBaseOfficialLetter(id)
      formData.value.daterange = [formData.value.startDate, formData.value.endDate]
      userBio.value = formData.value.remark

      tableUserData.value = await BaseOfficialLetterApi.getLetterUserList(id)

      uploadList.value = await BaseOfficialLetterApi.getLetterFileList(id)
      tableData.value = await BaseOfficialLetterApi.getLetterRecordsList(id)
      await getOperateList()
    } finally {
      formLoading.value = false
    }
  }
  userList.value = await UserApi.getSimpleUserList()
  deptList.value = await DeptApi.getSimpleDeptList()
}

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数

/** 查询列表 */
const getOperateList = async () => {
  loading.value = true
  try {
    const data = await OperateLogApi.getOperateLogPage(queryParams)
    operateData.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
const handleClick = async (tab, event) => {
  activeName.value = tab.props.name
  if (tab.props.name === 'first') {
    await getOperateList()
  } else if (tab.props.name === 'second') {
    tableUserData.value = await BaseOfficialLetterApi.getLetterUserList(props.detailId)
  } else if (tab.props.name === 'third') {
    uploadList.value = await BaseOfficialLetterApi.getLetterFileList(props.detailId)
  } else if (tab.props.name === 'forth') {
    tableData.value = await BaseOfficialLetterApi.getLetterRecordsList(props.detailId)
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    theme: undefined,
    daterange: undefined,
    startDate: undefined,
    endDate: undefined,
    fileExists: undefined,
    content: undefined,
    remark: undefined,
    imageAddress: undefined,
    status: CommonStatusEnum.ENABLE,
    detailData: undefined,
    fileData: undefined
  }
}
</script>

<style scoped lang="scss">
.el-drawer__body {
    flex: 1;
    overflow: auto;
}
.el-drawer__header {
  align-items: center;
  color: #72767b;
  display: flex;
  padding: var(--el-drawer-padding-primary);
  padding-bottom: 0;
}
.first{
  line-height:25px;
  font-size:18px;
  color:#8a8a8a;
  display:flex;
  :deep(.el-icon){
    margin-top:5px !important
  }
}
.left{
  margin-left:12px
}
.second{
  background:#fff;
  padding:15px 20px;
  display:flex;
  margin-top:10px;
}
.logo{
  height:80px;
  width:80px
}
.main{
  margin-left:30px;
  width:calc(100% - 110px)
}
.m-top{
  display: flex;
  justify-content: space-between;
}
.m-tleft{
  display:flex
}
.gender{
  height:20px;
  width:20px;
  margin:3px 8px 0 8px
}
.age{
  color:#8a8a8a;
  line-height:26px
}
.tag1{
  padding:5px 10px;
  color:#4341ff;  
  border:1px solid #4341ff;
  margin-top: 10px;
  font-size:14px
}
.tag2{
  padding:5px  10px;
  color:#dc806f;
  border:1px solid #dc806f;
  margin-left:10px;
  margin-top: 10px;
  font-size:14px
}
.tag3{
  padding:5px  10px;
  color:#787878;
  margin-top: 10px;
  margin-left:10px;
  border:1px solid #787878;
  font-size:14px
}
.name{
  font-size:20px;
  font-weight:bold
}
.m-bottom{
  margin:20px 0;
}
:deep(.el-descriptions__label){
  font-size:16px;
  color:#8a8a8a
}
:deep(.el-descriptions__content){
  font-size:16px;
  color:#333
}
.third{
  background:#fff;
  margin-top:10px;
  padding:15px
}
:deep(.el-tabs__item){
  padding:0 30px !important;
}
</style>